<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>忘记密码</title>

	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/sqc.css" />


</head>
<style>
	input{
		outline:none;
	}
	html {
		background-color: #fff;
	}

	body {
		background-color: #fff;
		padding: 0 5%;
	}

	.warn-box {
		margin-top: 10px;
	}

	#app .warn-box .input {
		width: 97%;
	}

	.input-center {
		width: 100%;
	}

	.select-title-text {
		margin: 10px 0;
	}
</style>

<body>
	<div id="blank" class="header">
		<div v-back.tapmode class="back"></div>
		<span class="title"></span>
	</div>
	<div id="app" class="top-container">
		<div style="font-size:30px;text-align:left;margin-bottom:63px;">忘记密码</div>
		<div class="warn-box clearfix" style="border-bottom:1px solid #F7F4F2;">
			<span class="warn-title-right" v-show="warn_box">{{warn_title1}}</span>
			<input class="input" type="tel" v-model="phone" maxlength="11"
			placeholder="请输入手机号"	 @blur="" required />

		</div>
		<div class="clearfix">
			<span class="warn-title-right" v-show="warn_box">{{warn_title2}}</span>
		</div>
		<div class="warn-box input-center input-text">
			<input class="input" type="number" placeholder="请输入短信验证码" v-model="verify_code" />
			<sendcode @codemessage="codeMessage" :phone="phone" type="2" style="position:absolute;right:0px;top:1.3rem">
			</sendcode>
		</div>
		<div class="warn-box clearfix" v-show="!lookpwd" >
			<!-- <span class="warn-title-right" v-show="warn_box">{{warn_title3}}</span> -->
			<input class="input" type="password" v-model="newPwd1" ref="input1" placeholder="请输入新密码" @blur="verifyPassword" required />
			<img src="../../image/big/modifyPwd_icon_close.png" v-show="newPwd1!=''" class="lookpwd" v-myclick="lookPassword" alt="">
		</div>
		<div class="warn-box clearfix" v-show="lookpwd" >
			<!-- <span class="warn-title-right" v-show="warn_box">{{warn_title3}}</span> -->
			<input class="input" type="text" v-model="newPwd1" ref="input1" placeholder="请输入新密码" @blur="verifyPassword" required />
			<img src="../../image/big/modifyPwd_icon_open.png" v-show="newPwd1!=''" class="lookpwd" v-myclick="lookPassword" alt="">
		</div>

		<div class="regrist-button" style="margin-top:47px;width:100%" v-show="phone&&verify_code&&newPwd1&&newPwd2" v-myclick="updPassword">确认修改</div>
		<div class="regrist-button" style="margin-top:47px;width:100%" v-show="!(phone&&verify_code&&newPwd1&&newPwd2)">确认修改</div>

	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>

	var vm, user


	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		});
		initApp();
		api.parseTapmode();
		addListeners();
	};

	function initApp() {
		vm = new Vue({
			el: '#app',
			data: {
				phone: '',
				verify_code: '',
				newPwd1: '',
				newPwd2: '',
				btn: 1,
				warn_box: false,
				warn_title1: '',
				warn_title2: '',
				warn_title3: '',
				warn_title4: '',
				subPassword: false,
				flag: true,
				lookpwd:false,
			},
			methods: {
				lookPassword: function(){
					this.lookpwd = !this.lookpwd;
				},
				clearmesaage: function(){
					this.phone = '';
					this.verify_code = '';
					this.newPwd1 = '';
					this.newPwd2 = '';
					this.btn = 1;
					this.warn_box = false;
					this.warn_title1 = '';
					this.warn_title2 = '';
					this.warn_title3 = '';
					this.warn_title4 = '';
					this.subPassword = false;
					this.flag = true;
				},
				updPassword: function () {
					if(!this.subPassword){
						return;
					}
					if(!this.flag){
						return;
					}
					this.flag = false;
					var passwordVerify = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
					if (!passwordVerify.test(this.newPwd1)) {
						vm.warn_box = true;
						vm.warn_title3 = "请输入6-20位含字母和数字的密码";
						return;
					}
					var data = {
						phone: this.phone,
						verify_code: this.verify_code,
						password: this.newPwd1,
					};
					var callback = function (ret) {
						if (ret.errcode == 0) {
							vm.clearmesaage();
							api.toast({
								msg: '修改成功',
								duration: 1000,
								location: 'middle'
							});
							setTimeout(function () {
								api.closeWin();
							}, 1000)
						} else {
							api.alert({
								title: '错误',
								msg: ret.message,
								buttons: ['确定']
							}, function (ret, err) {

							});
						}

					};
					var errback = function (ret) {
						vm.warn_box = true;
						vm.warn_title2 = ret.message;
						vm.subPassword = false;
						vm.flag = true;
					}
					pinet.post(URL.forgetPwd, data, callback, errback);
				},
				verifyPassword: function () {
					var passwordVerify = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
					if (!passwordVerify.test(this.newPwd1)) {
						vm.warn_box = true;
						vm.warn_title3 = "请输入6-20位含字母和数字的密码";
					} else {
						vm.warn_title3 = "";
					}
				},
				codeMessage: function (a) {

				}
			},
			watch: {
				phone: function (phone) {
					if(phone.length == 11){
						if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
							vm.warn_box = true;
							vm.warn_title1 = '请输入正确的手机号';
							return false;
						}else{
							vm.warn_box = false;
							vm.warn_title1 = '';
						}
					}
				},
				verify_code: function (){
					vm.warn_box = false;
					vm.warn_title2 = '';
				},
				newPwd1: function () {
					if (this.newPwd1 != '' && this.newPwd2 != '') {
						if (this.newPwd1 === this.newPwd2) {
							vm.warn_box = false;
							vm.warn_title3 = '';
							vm.subPassword = true;
						} else {
							vm.warn_box = true;
							vm.warn_title3 = '两次输入的密码不相同';
							vm.subPassword = false;
						}
					}
				},
				newPwd2: function () {
					if (this.newPwd1 === this.newPwd2) {
						vm.warn_box = false;
						vm.warn_title4 = '';
						vm.subPassword = true;
					} else {
						vm.warn_box = true;
						vm.warn_title4 = '两次输入的密码不相同';
						vm.subPassword = false;
					}
				}
			}
		});
	}


	function addListeners() {
		api.addEventListener({
			name: 'viewappear'
		}, function () {
			onPageStart();
		});

		api.addEventListener({
			name: 'viewdisappear'
		}, function (ret, err) {
			onPageEnd();
		});

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			vm.clearmesaage()
			onPageEnd();
			api.closeWin();
		});
	}


</script>

</html>
